$(document).ready(function (){

    function play() {
        let i = 0, si
        playByI()
        function playByI(){
            const who = `.show>:nth-child(${i+1})`
            const $who = $(who)
            const $whoDot = $(`.show-xin>:nth-child(${i+1})`)
            $who.show()
            $whoDot.attr("src", "/imgs/main/xin2.webp")
            $who.siblings().hide()
            $whoDot.siblings().attr("src", "/imgs/main/xin.webp")
        }
        function start(){
            si = setInterval(() =>{
                i = (++i) % 5
                playByI()
            },3000)
        }
        start()
        $(document).on("click", ".show-click-item1",()=>{
            i = (i + 4) % 5
            playByI()
        })
        $(document).on("click", ".show-click-item2",()=>{
            i = (++i) % 5
            playByI()
        })

         $(".show-xin").children().on("click", function() {
            i = $(this).index();
            console.log(i)
            playByI()
          });

        $(document).on("mouseenter", ".show,.show-xin", function() {
            clearInterval(si);
        });
        $(document).on("mouseleave", ".show,.show-xin",function () {
            start()
        })
        
    }

    //在where处展示弹窗
    function alert(where){
        const $box = $(`
            <div class="alert-window">
                <div class="alert-box">
                    <div class="alert-box-1">
                        <img class="alert-box-2" src="/imgs/main/X.webp" alt="">
                    </div>
                </div>
            </div>
        `)
        $(where).append($box)
        return 1
    }
    $(document).on("click", ".badge", () =>{
        flag = alert(".poster")
        $("body").css("overflow", "hidden")
   })

    var flag = 0
    $(document).on("click", ".box-1-warn", () =>{
         flag = alert(".box-1")
    })
    $(document).on("click", ".alert-box-2", () =>{
        $(".alert-window").remove()
        $("body").css("overflow", "")
        flag = 0
   })
   $(document).on("click", ".box-1-in", () =>{
    window.location.href = "second-main.html"
    })
    
    $(".main-boxs").on("mousewheel", function (ev) {
        if(flag) return 
        let hhs = ev.originalEvent.wheelDelta
        let index = $(".main-boxs").attr("index")
        let maxpage = 2
        if((hhs > 0 &&--index<0) || (hhs < 0 && ++index>maxpage)){
            return
        }
        if (!$(this).is(":animated")) {
            if(index==maxpage){
                $(".main-boxs").animate({ top: `-150%`}, 1000)
                $(".main-boxs").attr("index", index)
            }
            else{
                $(".main-boxs").animate({ top: `-${index}00%`}, 1000)
                $(".main-boxs").attr("index", index)
            }
        }
    })
    play()
})